<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <divid="app">
     <p>First name: <input type="text" v-model="firstName"></p>
    <p>Last name: <input type="text" v-model="lastName"></p>
     <p>fullname:{{fullname}}</p>
    <button @click="change">改变fullname</button>
        </div>
</body>
<script>
        var vm = new Vue({ 
        el: "#app", 
        data: {
        val: "简单对象初始值", 
        obj:{
             name: "复杂对象 name", 
             value: "复杂对象 value",
         }
     },
     watch:{
         val:function(newval,oldval) {
     console.log(newval,oldval);
         console.log(this.val)
         }
         obj: {
             deep: true,
             handler: function(new_val, old_val) {
             console.log(new_val, old_val)
             }
         }
     }
     })
     
</script>
</html>